<template>
  <div>
    <el-tabs v-model="mesActiveName">
      <el-tab-pane label="业务参数" name="base">
        <el-form
            :model="MiGetCustomerBarcodeData"
            size="mini"
            label-width="100px"
            label-position="left"
        >
          <el-form-item label="SFC" width="120px">
            <data-source-input
                :node-id="MiGetCustomerBarcodeData.SFCDatasourceNodeId"
                :param-name="MiGetCustomerBarcodeData.SFC"
                @change="onSFCChange"
                null-message="请选择SFC来源"
                style="max-width: 600px;width: 500px;margin-left: 6px"
            />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
                v-model="MiGetCustomerBarcodeData.Desc"
                type="textarea"
                :rows="3"
                placeholder="请输入描述"
                style="width: 90%"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="基础参数" name="requestParams">
        <base-params-form></base-params-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">

import DataSourceInput from "@/vue2-flow/src/views/flow/components/NodeInputSourceDataComponent.vue";
import BaseParamsForm from "@/vue2-flow/src/views/flow/NodeConfig/mes/BaseParamsForm.vue";

import {onMounted, ref} from 'vue'
//@ts-ignore
import Utils from "@/vue2-flow/src/utils/Common.js";
//@ts-ignore
import FlowNodeDataApi from "@/api/flow/FlowNodeDataApi.js";
import {useFlowStore} from "@/store/modules/flow/flowStore";
import {AppParams} from "@/utils/appParams";

const FlowStore = useFlowStore()
const mesActiveName = ref('base')
const MiGetCustomerBarcodeData = ref<{
  SFCDatasourceNodeId: number,
  SFC: string,
  SFCDatasource: string,
  inventory: string,
  inventoryDatasourceNodeId: string,
  inventoryDatasource: string,
  NodeId: number,
  Desc: string,
}>({
  SFC: '',
  SFCDatasource: '',
  SFCDatasourceNodeId: 0,
  inventory: '',
  inventoryDatasourceNodeId: '',
  inventoryDatasource: '',
  NodeId: 0,
  Desc: ''
})

const onSFCChange = (item: any) => {
  if (!Utils.IsEmpty(item)) {
    MiGetCustomerBarcodeData.value.SFCDatasourceNodeId = item.nodeId
    MiGetCustomerBarcodeData.value.SFC = item.ParamName
    MiGetCustomerBarcodeData.value.SFCDatasource = item.DataSource
  }
}

/**
 * 保存配置
 */
const _SaveNode = (NodeName: string) => {
  const _mes = MiGetCustomerBarcodeData.value
  const params = {
    NodeMes: {
      DataSources: [{
        DataSource: _mes.SFCDatasource,
        DataSourceId: _mes.SFCDatasourceNodeId,
        ParamName: Utils.replaceAll(_mes.SFC, _mes.SFCDatasourceNodeId, ''),
        TargetParamName: AppParams.PARAM_NAME.SFC
      }]
    },
    Desc: _mes.Desc
  }
  new FlowNodeDataApi().Install(FlowStore.CurrentClickNode.id, params, NodeName)
}

const ShowNodeData = () => {
  const _node = FlowStore.CurrentClickNode
  SetFormValue(_node)
}

const SetFormValue = (_node: any) => {
  if (!Utils.IsEmpty(_node.nodeInputParam) && !Utils.IsEmpty(_node.nodeInputParam.NodeMes) && !Utils.IsEmpty(_node.nodeInputParam.NodeMes.DataSources)) {
    const DataSources = _node.nodeInputParam.NodeMes.DataSources
    const from = {} as any
    for (const dataSource of DataSources) {
      if (dataSource.TargetParamName === AppParams.PARAM_NAME.SFC) {
        from.SFC = dataSource.ParamName
        from.SFCDatasource = dataSource.DataSource
        from.SFCDatasourceNodeId = dataSource.DataSourceId
      }
      if (dataSource.TargetParamName === AppParams.PARAM_NAME.INVENTORY) {
        from.inventory = dataSource.DataSourceId + dataSource.ParamName
        from.inventoryDatasource = dataSource.DataSource
        from.inventoryDatasourceNodeId = dataSource.DataSourceId
      }
    }
    from.Desc = _node.nodeInputParam.Desc
    from.id = _node.id
    MiGetCustomerBarcodeData.value = from
  }
}
onMounted(() => {
  ShowNodeData()
})

defineExpose({_SaveNode})


</script>

<style scoped lang="scss">


</style>
